<template>
  <div class="home">
    <div class="title"/>
    <div class="video-container">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlay"/>
    </div>
    <div class="scroll-container" ref="scroll">
      <div class="wapper">
        <div class="box" v-for="(v,i) in videoList" :key="i" @click="videoClick(v)">
          <img :src="v.img" :alt="v.desc"/>
          <div>{{v.desc}}</div>
        </div>
      </div>
      <div class="note" v-show="showNote"/>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import axios from 'axios'
export default {
  name: 'home',
  components: {
  },
  data(){
    return {
      showNote:true,
      myScroll:null,
      // videoSrc:'/static/video/EP05.mp4',
      // poster:'/static/img/img1.png',
      videoList:[],
      playerOptions: {
        //        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          // type: 'application/x-mpegURL',
          src: '', //你的m3u8地址（必填）,
          desc:''
        }],
        poster: '/static/img/img1.png', //你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
         timeDivider: true,
         durationDisplay: true,
         remainingTimeDisplay: false,
         fullscreenToggle: true  //全屏按钮
        }
      }
    }
  },
  created(){
    this.getList()
  },
  mounted(){
    this.$nextTick(()=>{
      this.scrollInit()
    })
  },
  methods:{
    scrollInit() {
      if (this.myScroll) {
        return
      }
      this.myScroll = new BScroll(this.$refs.scroll, {
        probeType: 3,
        momentum: false,
        stopPropagation: true,
        // bindToWrapper: true,
        click:true
      })
      this.myScroll.on('scroll', (poy) => {
        this.showNote = poy.y >= this.myScroll.maxScrollY + 85
      })
    },
    videoClick(item){
      this.playerOptions.sources = [{src:item.src,desc:item.desc}]
      this.playerOptions.poster = item.img
      window.gtag('event','click',{
        'event_category': item.desc,
        'event_label': item.desc
      })
    },
    onPlay(){
      window.gtag('event','play',{
        'event_category': this.playerOptions.sources[0].desc,
        'event_label': this.playerOptions.sources[0].desc
      })
    },
    async getList(){
      let res = await axios.get('/static/list.json')
      this.videoList = res.data.list
      this.playerOptions.sources=[{src:this.videoList[0].src,desc:this.videoList[0].desc}]
      this.playerOptions.poster=this.videoList[0].img
    }
  }
}
</script>
<style lang="stylus">
.home
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  position: relative;
  .note
    position: fixed;
    width: 750px;
    height: 309px;
    bottom: 0;
    left: 0;
    z-index: 0;
    background:url('~assets/load_more.png') center top no-repeat;
  .title
    width: 583px;
    height: 167px;
    background: url('~assets/title.png') center center no-repeat;
    margin: 35px auto 0;
  .video-container
    width: 608px;
    height: 342px;
    box-shadow: #9e9e9e 0px 0px 40px;
    margin: 45px auto 0;
    .vjs-big-play-button
      background-color: rgba(0,0,0,0.45)!important;
  .scroll-container
    margin: 20px auto 0;
    width: 608px;
    height: calc(100vh - 612px);
    overflow: hidden;
    .box
      height: 175px;
      display: flex;
      // justify-content:center;
      align-items:center;
      border-bottom: 1px solid #e6e5e4;
      img
        flex: 0 0 224px;
        height: 138px;
      div
        flex: 1;
        font-size: 24px;
        margin-left: 20px;
</style>
